<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人展示</title>
    <link th:href="@{/static/upload/css/cropper.min.css}" rel="stylesheet">
    <link th:href="@{/static/upload/css/ImgCropping.css}" rel="stylesheet">
    <link th:href="@{/static/backstage/css/layui.css}" rel="stylesheet">
</head>
<body>
<!--设置滚动条-->
<style>
    body::-webkit-scrollbar{
        width:10px;
    }
    body::-webkit-scrollbar-track{
        /*background: #999;*/
        background: #fff;
        border-radius:2px;
    }
    body::-webkit-scrollbar-thumb{
        /*background: red;*/
        background: #fff;
        border-radius:10px;
    }
    body::-webkit-scrollbar-thumb:hover{
        /*background: #333;*/
        background: #fff;
    }
    body::-webkit-scrollbar-corner{
        /*background: #179a16;*/
        background: #fff;
    }
</style>
<!--MainContent-->
<div class="max_area" id="main_content">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>个人信息</legend>
    </fieldset>
    <div class="layui-form-item">
        <label class="layui-form-label">用户ID</label>
        <div class="layui-input-block">
            <p id="btn_value" style="line-height: 36.8px;font-size: 16px;">[[${userDTO.userId}]]</p>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">注册时间</label>
            <div class="layui-input-inline">
                <p style="line-height: 39px;font-size: 16px;" id="th_registerTime">[[${userDTO.registerTime}]]</p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户头像</label>
        <img th:src="${userDTO.avatar}" style="width: 150px;border-radius: 100px;height: 150px;" id="th_avatar"><br>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户昵称</label>
        <div class="layui-input-block" style="width: 250px;">
            <p style="line-height: 36.8px;font-size: 16px;" id="th_nickName">[[${userDTO.nickName}]]</p>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">登录名</label>
        <div class="layui-input-block" style="width: 250px;">
            <p style="line-height: 36.8px;font-size: 16px;" id="th_userName">[[${userDTO.userName}]]</p>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline" style="width: 250px;">
                <p style="line-height: 36.8px;font-size: 16px;" id="th_password">*********</p>
                <a th:id="'ViewPassword'" style="position:absolute;left: 45%;top: 25%;color: blue;" href="javascript:void(0);">查看</a>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户图片</label>
        <img th:src="${userDTO.photo}" style="height: 300px;" id="th_photo">
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">简介</label>
        <div class="layui-input-block" style="padding: 5px; width: 80%;height: auto;line-height: 29px;" id="th_introduction">[[${userDTO.introduction}]]</div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">小话</label>
        <div class="layui-input-block" style="padding: 5px; width: 80%;height: auto;line-height: 29px;" id="th_essay">[[${userDTO.essay}]]</div>
    </div>
    <div id="updateBtn" style="color: #fff;font-size: 14px; position: absolute;top: 10%;left: 50%;padding: 8px;border-radius: 2px;background-color:  #009688;">编 辑</div>

</div>
<!--UpdateContent-->
<div id="update_content"
     style="display: none;width: 102%;height: 100%;position: fixed;background-color: #fff;top: 0%;overflow-y: scroll;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>修改个人信息</legend>
    </fieldset>

    <form class="layui-form" id="post_form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-block">
                <input name="userId" th:id="post_form_userId" type="hidden" value="">
                <p id="post_form_userId_p" style="line-height: 36.8px;color: #8a8383;font-size: 16px;"></p>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">注册时间</label>
                <div class="layui-input-inline">
                    <p id="post_form_registerTime" style="line-height: 39px;font-size: 16px;color: #8A8383;"></p>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户头像</label>
            <img id="finalImg" src="#" style="width: 150px;border-radius: 100px;height: 150px;"><br>
            <input id="post_form_avatar" name="avatar" type="hidden" value="">
            <input class="l-btn" id="replaceImg" style="margin-left: 125px;margin-top: 15px;" type="button"
                   value="选择图片">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户昵称</label>
            <div class="layui-input-block" style="width: 250px;">
                <input autocomplete="off" class="layui-input" id="post_form_nickName" lay-verify="required" name="nickName"
                       type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-block" style="width: 250px;">
                <input autocomplete="off" class="layui-input" id="post_form_userName" lay-verify="required" name="userName"
                       type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline" style="width: 250px;">
                    <!-- 用于确认密码 -->
                    <input name="password" autocomplete="off" lay-verify="required" class="layui-input" type="password" id="post_form_password">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户图片</label>
            <img id="img_id2" img src="#" style="height: 300px;">
            <input id="post_form_photo" name="photo" type="hidden">
            <div style="width: 80px;text-align: center;color: #fff;height: 30px;background-color: #009688;font-size: 14px;border-radius: 2px;line-height: 30px;margin-left: 110px;margin-top: 1%;padding: 3px;">
                <input accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="img_file" onchange="showImg()"
                       style="opacity: 0;position: absolute;"
                       type="file">
                选择图片
            </div>

        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-block">
                <textarea style="width: 98%;" name="introduction" lay-verify="required" class="layui-textarea" id="post_form_introduction"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">小话</label>
            <div class="layui-input-block">
                <textarea style="width: 98%;" name="essay" lay-verify="required" class="layui-textarea" id="post__form_essay"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="post_form_btn" lay-submit lay-filter="updatePersonalForm">立即提交</button>
<!--                <input class="layui-btn" id="post_form_btn" type="button" value="立即提交"/>-->
                <input class="layui-btn layui-btn-primary" id="cancelBtn" type="button" value="取消"/>
            </div>
        </div>
    </form>
</div>
<!--图片裁剪框 start-->
<div class="tailoring-container" style="display: none">
    <div class="black-cloth" onclick="closeTailor(this)"></div>
    <div class="tailoring-content">
        <div class="tailoring-content-one">
            <label class="l-btn choose-btn" for="chooseImg" title="上传图片">
                <input accept="image/jpg,image/jpeg,image/png" class="hidden" id="chooseImg" name="file" onchange="selectImg(this)"
                       type="file">
                选择图片
            </label>
            <div class="close-tailoring" onclick="closeTailor(this)">×</div>
        </div>
        <div class="tailoring-content-two">
            <div class="tailoring-box-parcel">
                <img id="tailoringImg">
            </div>
            <div class="preview-box-parcel">
                <p>图片预览：</p>
                <div class="square previewImg"></div>
                <div class="circular previewImg"></div>
            </div>
        </div>
        <div class="tailoring-content-three">
            <button class="l-btn cropper-reset-btn">复位</button>
            <button class="l-btn cropper-rotate-btn">旋转</button>
            <button class="l-btn cropper-scaleX-btn">换向</button>
            <button class="l-btn sureCut" id="sureCut">确定</button>
        </div>
    </div>
</div>
<!--图片裁剪框 end-->




<script th:src="@{/static/upload/js/jquery-2.1.1.js}"></script>
<script th:src="@{/static/upload/js/cropper.min.js}"></script>
<script th:src="@{/static/backstage/js/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    //点击显示密码和隐藏密码
    $("#ViewPassword").click(function () {
        var password = [[${userDTO.password}]];
        var text = $("#ViewPassword").text();
        if (text == "查看"){
            $("#ViewPassword").text("隐藏");
        }else{
            $("#ViewPassword").text("查看");
        }
        if ($("#th_password").text()=="*********"){
            $("#th_password").text(password);
        }else{
            $("#th_password").text("*********");
        }
    });
    //伪刷新
    function refresh(){
        $.ajax({
            url:"/backstage/selectUser",
            success:function (html){
                $("#main_content").html(html);
            }
        });
    }
    var userId = $("#btn_value").text();
    // console.log(userId);
    $("#cancelBtn").click(function () {
        $("#update_content").css("display", "none");
    });
    $("#updateBtn").click(function () {
        var flag = $("#update_content").css("display");
        // console.log(flag);
        if (flag == "none") {
            layer.load(1, {time: 0.3*1000});
            setTimeout(function () {
                $("#update_content").css("display", "block");
                $.get(
                    "/backstage/updateById/" + userId,
                    function (date) {
                        // console.log(date.userId);//接收到的数据不一致
                        $("#finalImg").attr("src", date.avatar);
                        $("#post_form_userId").attr("value", userId);
                        $("#post_form_userId_p").html(userId);
                        $("#post_form_avatar").attr("value", date.avatar);
                        $("#post_form_nickName").attr("value", date.nickName);
                        $("#post_form_userName").attr("value", date.userName);
                        $("#post_form_password").attr("value", date.password);
                        $("#img_id2").attr("src", date.photo);
                        $("#post_form_photo").attr("value", date.photo);
                        $("#post_form_registerTime").html(date.registerTime);
                        $("#post_form_introduction").val(date.introduction);
                        $("#post__form_essay").val(date.essay);
                    },
                    "json");
            },400)

        } else {
            $("#update_content").css("display", "none");
        }
    });
    //弹出框水平垂直居中
    (window.onresize = function () {
        var win_height = $(window).height();
        var win_width = $(window).width();
        if (win_width <= 768) {
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                "left": 0
            });
        } else {
            $(".tailoring-content").css({
                "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                "left": (win_width - $(".tailoring-content").outerWidth()) / 2
            });
        }
    })();
    //弹出图片裁剪框
    $("#replaceImg").on("click", function () {
        $(".tailoring-container").toggle();
    });

    //图像上传
    function selectImg(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var replaceSrc = evt.target.result;
            //更换cropper的图片
            $('#tailoringImg').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
        }
        reader.readAsDataURL(file.files[0]);
    }

    //cropper图片裁剪
    $('#tailoringImg').cropper({
        aspectRatio: 1 / 1,//默认比例
        preview: '.previewImg',//预览视图
        guides: false,  //裁剪框的虚线(九宫格)
        autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable: false, //是否允许移动图片
        dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable: true,  //是否允许移动剪裁框
        resizable: true,  //是否允许改变裁剪框的大小
        zoomable: false,  //是否允许缩放图片大小
        mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
        touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
        rotatable: true,  //是否允许旋转图片
        crop: function (e) {
            // 输出结果数据裁剪图像。
        }
    });
    //旋转
    $(".cropper-rotate-btn").on("click", function () {
        $('#tailoringImg').cropper("rotate", 45);
    });
    //复位
    $(".cropper-reset-btn").on("click", function () {
        $('#tailoringImg').cropper("reset");
    });
    //换向
    var flagX = true;
    $(".cropper-scaleX-btn").on("click", function () {
        if (flagX) {
            $('#tailoringImg').cropper("scaleX", -1);
            flagX = false;
        } else {
            $('#tailoringImg').cropper("scaleX", 1);
            flagX = true;
        }
        flagX != flagX;
    });
    //裁剪后的处理
    $("#sureCut").on("click", function () {
        if ($("#tailoringImg").attr("src") == null) {
            return false;
        } else {
            var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
            var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
            $("#finalImg").prop("src", base64url);//显示为图片的形式
            $("#post_form_avatar").attr("value", base64url);
            //关闭裁剪框
            closeTailor();
        }
    });

    //关闭裁剪框
    function closeTailor() {
        $(".tailoring-container").toggle();
    }

    //第二张图片
    function showImg() {
        var file = document.getElementById('img_file').files[0];
        var size = file.size / 1024;
        // console.log(size);
        if (size > 1024) {
            layer.msg('图片只能小于1M，请重新选择！', { icon: 5 });
        } else {
            var re = new FileReader();
            re.readAsDataURL(file);
            re.onload = function (re) {
                $('#img_id2').attr("src", re.target.result);
                $('#post_form_photo').attr("value", re.target.result);
            }
        }
    }
    //更新提交
    layui.use('form', function(){
        var form = layui.form,
            $ = layui.$;
        form.on('submit(updatePersonalForm)', function(data){
            var form_date = $("#post_form").serialize();
            $.post(
                "/backstage/updateUserInfo/",
                "action=updateById&" + form_date,
                function (date) {
                    window.location.reload();
                });
        })
    })
</script>
</body>
</html>